<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="box">扫光动画</div>
		</div>
	</body>
	
	<script>
		new Vue({
			el:"#app",
			data:{ 
				
			}
		})
	</script>
	
	<style>
		.box{
			width: 200px;
			height: 100px;
			line-height: 100px;
			background-color:green;
			overflow: hidden;
			margin: 50px;
			text-align: center;
			font-size: larger;
			font-weight: 700;
			letter-spacing: 5px;
			color: white;
			position: relative;
		}
		.box::after{
			position: absolute;
			content: "";
			display: inline-block;
			width: 15px;
			height: 200%;
			background-color: rgba(255, 255, 255,0.5);
			box-shadow: 0 0 20px lightblue;
			animation: go 3s linear infinite ;
			animation-fill-mode: forwards;
		}
		@keyframes go{
			0%{
				transform: translate(-100px,-50px) rotate(45deg);
			}
			100%{
				transform: translate(300px,-50px) rotate(45deg);
			}
		}
	</style>
</html>
